<template>
  <el-dialog
    custom-class="add-car"
    v-el-drag-dialog="{ drag: true, full: true, resize: false, resizeWinFun: setDataGridHeight }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    :title="mdTitle"
    :width="'80%'">
    <div ref="dgtools" class="filter-container">
      <el-form
        :model="dg.ps"
        :inline="true"
        @keyup.enter.native="getDgList">
        <el-form-item label="驾驶员" prop="find">
          <el-input 
            placeholder="姓名或手机号" 
            v-model="dg.ps.find" 
            clearable
            style="width: 120px;"
          />
        </el-form-item>

        <el-form-item label="小队/小组" prop="deptId">
          <SelTeamGroup 
            :pname="'teamGroupId'" 
            :isSelAny="true" 
            @selItem="getSeledTeamGroup">
          </SelTeamGroup>
        </el-form-item>

        <el-form-item label="岗位角色" prop="roleId">
          <el-select
            v-model="dg.ps.roleId"
            multiple clearable
            :collapse-tags="true"
            placeholder="请选择部门角色"
            style="width: 100%">
            <el-option
              v-for="item in roleOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-button 
          type="primary" 
          icon="el-icon-search" 
          @click="getDgList">
          搜索
        </el-button>

        <el-button 
          type="primary" 
          icon="el-icon-check" 
          @click="onSetDriver">
          确认设置
        </el-button>
        
        <el-tag style="margin-left: 10px;"><b>当前驾驶员：{{obj.realName ? obj.realName+'-'+obj.phone : '未设置'}}</b></el-tag>
      </el-form>
    </div>
    
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight - 100"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="selection" 
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>

      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'driverName'">
            {{row.driver && row.driver.realName}}
          </template>

          <template v-else-if="col.field == 'driverPhone'">
            {{row.driver && row.driver.phone}}
          </template>

          <template v-else-if="col.field == 'takeDriveTime'">
            {{row.takeDriveTime | time('yyyy年MM月dd号')}}
          </template>

          <template v-else-if="col.field == 'takeDriveAddTime'">
            {{row.takeDriveAddTime | time('yyyy年MM月dd号')}}
          </template>

          <template v-else-if="col.field == 'takeDriveExpireTime'">
            {{row.takeDriveExpireTime | time('yyyy年MM月dd号')}}
          </template>

          <template v-else-if="col.field == 'certificateType'">
            {{row.certificateType}}
          </template>

          <template v-else-if="col.field == 'certificateExpireTime'">
            {{row.certificateExpireTime | time('yyyy年MM月dd号')}}
          </template>

          <template v-else-if="col.field == 'certificateNum'">
            {{row.certificateNum}}
          </template>

          <template v-else-if="col.field == 'certificateDriveType'">
            {{row.certificateDriveType}}
          </template>

          <template v-else-if="col.field == 'takeCertificateTime'">
            {{row.takeCertificateTime | time('yyyy年MM月dd号')}}
          </template>

          <template v-else-if="col.field == 'driverCardUrl'">
            <div class="flex" v-if="row.driverCardUrl && row.driverCardUrl != ','">
              <el-image  
                class="list-row-img" 
                alt="暂无图片"
                title="点击查看大图"
                v-for="img in row.driverCardUrl.split(',')"
                :key="img"
                :src="img" 
                :preview-src-list="[img]">
                <div slot="error">
                  <i class="el-icon-picture-outline fs-18"></i>
                </div>  
              </el-image>
            </div>
          </template>

          <template v-else-if="col.field == 'certificateUrl'">
            <div class="flex" v-if="row.certificateUrl && row.certificateUrl != ','">
              <el-image  
                class="list-row-img"
                alt="暂无图片"
                title="点击查看大图"
                v-for="img in row.certificateUrl.split(',')"
                :key="img"
                :src="img" 
                :preview-src-list="[img]">
                <div slot="error">
                  <i class="el-icon-picture-outline fs-18"></i>
                </div>  
              </el-image>
            </div>
          </template>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="dg.total > 0" 
      :total="dg.total" 
      :page.sync="dg.ps.page" 
      :limit.sync="dg.ps.rows" 
      @pagination="getDgList"
    />
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import TableSelfSet from '@/components/TableSelfSet';    
import Pagination from '@/components/Pagination';

import SelTeamGroup from '@/components/SelTeamGroup';

import * as logisticsSer from "@/api/services/logistics.service";
import * as commonSer from "@/api/services/common.service";

export default {
  name: "AddMainDriver",
  mixins: [ DataGridBase, DataGridResize],
  directives: { elDragDialog },
  components: { TableSelfSet, Pagination, SelTeamGroup},
  props: {mdTitle: String, myData: Object},
  data() {
    let cols = [
      {label: '单位编号', field: 'unitNum', width: 90},
      {label: '驾驶员', field: 'driverName', width: 70},
      {label: '驾驶员电话', field: 'driverPhone', width: 100},
      {label: '准驾车型', field: 'driveType', width: 100},
      {label: '驾驶证领证时间', field: 'takeDriveTime', width: 120},
      {label: '驾驶证增驾时间', field: 'takeDriveAddTime', width: 120},
      {label: '驾驶证换证时间', field: 'takeDriveExpireTime', width: 120},
      {label: '资格证证件类型', field: 'certificateType', width: 100},
      {label: '资格证准驾车型', field: 'certificateDriveType', width: 100},
      {label: '资格证号', field: 'certificateNum', width: 100},
      {label: '资格证领证时间', field: 'takeCertificateTime', width: 120},
      {label: '资格证换证时间', field: 'certificateExpireTime', width: 120},
      {label: '驾驶证照片', field: 'driverCardUrl', width: 80},
      {label: '资格证照片', field: 'certificateUrl', width: 80},
    ];
    return {
      dg: {// 表格参数对象
        dgName: 'dg',
        tbName: 'addMainDriverTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1, rows: 20,
          // 驾驶员姓名或手机号
          find: '', 
          // 小组
          deptId: [], 
          // 角色
          roleId: [], 
          // 是否包含主驾，默认传值0 eg：0不包含 1包含
          // isMain: '0',  // 2022.4.15不需要传值，这里就是获取驾驶员列表，由人来判断派给谁
        },
      },

      // 已设置驾驶员对象 {realName: '', phone: ''}
      obj: this.myData.obj,

      // 角色列表
      roleOptions: [],
    };
  },
  created() {
    const that = this;

    // console.log('父级传入的数据', this.myData);

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods: {
    closeMd(){
      this.$emit('myClick', {state: false});
    },
    // 获取选中-小队、小组数据
    getSeledTeamGroup(e){
      this.U.setFmArr(this.dg.ps.deptId, e.val);

      // 获取部门对应角色
      this.handleChange(this.dg.ps.deptId.join(','));
    },
    // 查询指定部门角色列表
    handleChange(id) {
      this.dg.ps.roleId = [];
      this.roleOptions = [];

      if(id){
        commonSer.getRoleByDeptId({ deptId: id }).then((res) => {
          this.roleOptions = res.data;
        });
      }
    },
    // 获取-表格列表
    getDgList() {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
      
      ps.deptId = ps.deptId.join(',');
      ps.roleId = ps.roleId.join(',');

      logisticsSer.findDriverList(ps).then(res => {
        if(res.code == 1){
          let list = res.data;
          for(let i in list){ list[i].dgName = dg.dgName; }
      
          dg.list = list;
          dg.total = res.count;
        }
      });
    },

    // 提交设置驾驶员
    onSetDriver() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if(rows.length !== 1){
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      }else{
        // 调用父级方法
        that.$emit('myClick', {state: false, ps: rows[0]});
      }
    },
  },
}
</script>